<template>
  <section class="content">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>名称：
          <el-select v-model="currentGroupId" clearable placeholder="请选择">
            <el-option
              v-for="item in queryPoint"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>时间：
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="timefirst"
          ></el-date-picker>数据类型：
          <el-select v-model="typeid" clearable placeholder="全部">
            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-checkbox v-model="tCheckedByDay">按日连接绘制曲线</el-checkbox>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="24" class="bc-w">
      <el-col :span="12" class="chart-plane" v-for="item in sonGroup" :key="item.id">
        <div v-if="item.monitorContent != null && item.monitorContent.id === 13">
          <div id="surveyTime">时间：
            <el-date-picker
              v-model="surveyTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </div>
        <div v-else>
          <br>
          <br>
        </div>
        <div class="chartLine" :id="'charts'+item.id"></div>
      </el-col>
    </el-col>
  </section>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      surveyTime: "2018-10-16",
      sonGroup: "",
      pointId: "",
      projectId: "",
      activeName: "first",
      currentGroupId: null,
      crossSectionlist: null,
      longitudinalSectionlist: null,
      firstTime: [],
      type: [{ id: 1, name: "设备数据" }, { id: 2, name: "人工数据" }],
      typeid: "",
      value2: [],
      queryPoint: [],
      options1: [],
      tCheckedByDay: false,
      lCheckedByDay: false,
      pickerOptions2: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      pickerOptions3: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      }
    };
  },
  methods: {
    timefirst(t) {
      this.value2 = t;
    },
    query() {
      let data = {
        projectId: this.$route.query.projectId,
        parentId: this.currentGroupId
      };
      this.projectModel
        .querylandSubsidenceProfile(data)
        .then(res => {
          this.sonGroup = res.data.list;
          for (let index = 0; index < this.sonGroup.length; index++) {
            this.inquire(this.sonGroup[index]);
          }
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    inquire(group) {
      if (this.value2[0] != undefined && this.value2[1]) {
        if (group.monitorContent != null && group.monitorContent.id === 13) {
          let projectId = this.projectId;
          let dynamicTags = [];
          let data = {
            projectId: projectId,
            groupId: group.id
          };
          this.projectModel
            .queryPoint(data)
            .then(res => {
              if (res.status != 200) {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "warning"
                });
              }
              for (let index = 0; index < res.data.length; index++) {
                const item = res.data[index];
                dynamicTags.push(item.name);
              }
              this.projectModel
                .settleDatapoints(projectId, dynamicTags, this.surveyTime)
                .then(res => {
                  if (res.status != 200) {
                    this.$message({
                      showClose: true,
                      message: res.msg,
                      type: "warning"
                    });
                  }
                  this.surveyPointChart(group, res.data);
                })
                .catch(err => {
                  console.log(err.message);
                });
            })
            .catch(err => {
              console.log(err.message);
            });

          //***************************************************************** */
        } else {
          let data = {
            projectId: this.projectId,
            beginDate: this.value2[0],
            endDate: this.value2[1],
            type: 2,
            monitorItemId:
              group.monitorContent == null ? null : group.monitorContent.id,
            groupId: group.id,
            resultType: this.tCheckedByDay ? 2 : 1
          };
          this.projectModel
            .collectData(data)
            .then(res => {
              this.drawLineChart(group, res.data.xAxis, res.data.series);
            })
            .catch(err => {});
        }
      } else {
      }
    },
    drawLineChart(group, Axis, series) {
      var chart = echarts.init(document.getElementById("charts" + group.id));
      var series1 = [];
      var names = [];
      for (var i = 0; i < series.length; i++) {
        series1.push({
          name: series[i].name,
          type: "line",
          data: series[i].value,
          smooth: false
        });
        names.push(series[i].name);
      }
      chart.setOption(
        {
          title: {
            text:
              moment(Axis.min).format("YYYY-MM-DD") +
              "至" +
              moment(Axis.max).format("YYYY-MM-DD") +
              group.name +
              "曲线图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:
              Axis.type == "value"
                ? function(params) {
                    return (
                      moment(params[0].data[0]).format("YYYY-MM-DD") +
                      "<br/>" +
                      params[0].seriesName +
                      " : " +
                      params[0].data[1]
                    );
                  }
                : undefined
          },
          legend: {
            y: "bottom",
            top: 30,
            data: names
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
                  日期`,
              nameLocation: "middle",
              min: Axis.min,
              max: Axis.max,
              type: Axis.type,
              boundaryGap: true,
              data: Axis.data,
              axisLabel: {
                formatter: function(value) {
                  if (Axis.type == "value")
                    return moment(value).format("YYYY-MM-DD");
                  else return value;
                }
              }
            }
          ],
          yAxis: [
            {
              name: "累计变化量(mm)",
              type: "value",
              nameLocation: "middle"
            }
          ],
          series: series1
        },
        true
      );
    },
    surveyPointChart(group, data) {
      var chart = echarts.init(document.getElementById("charts" + group.id));
      var series = [];
      var series1 = [];
      for (var i = 0; i < data.series.length; i++) {
        series.push({
          name: data.series[i].name,
          type: "line",
          smooth: false,
          symbolSize: 5,
          data: data.series[i].data
        });
        series1.push({
          name: data.series[i].name
        });
      }
      chart.setOption({
        title: {
          left: "center",
          text: this.surveyTime + "测点对比"
        },
        legend: {
          top: 30,
          data: series1
        },
        toolbox: {
          orient: "vertical",
          show: true,
          itemSize: 10,
          feature: {
            dataZoom: { yAxisIndex: "none" },
            restore: {},
            dataView: { readOnly: false }, //数据视图
            saveAsImage: {}
          }
        },
        xAxis: [
          {
            type: "value",
            axisLine: { onZero: false },
            axisLabel: { formatter: "{value}(mm)" }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: { onZero: false },
            axisLabel: { formatter: "{value}(m)" }
          }
        ],
        series: series
      });
    },
    date() {
      const end = new Date();
      var seperator1 = "-";
      var year = end.getFullYear();
      var month = end.getMonth() + 1;
      var strDate = end.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      var endDate = year + seperator1 + month + seperator1 + strDate;

      const start = new Date();
      var startYear = start.getFullYear() - 1;
      var startMonth = start.getMonth() + 1;
      var startDate = start.getDate();
      if (startMonth >= 1 && startMonth <= 9) {
        startMonth = "0" + startMonth;
      }
      if (startDate >= 0 && startDate <= 9) {
        startDate = "0" + startDate;
      }
      var startDat =
        startYear + seperator1 + startMonth + seperator1 + startDate;
      this.value2 = [startDat, endDate];
      this.value5 = [startDat, endDate];
      this.value8 = [startDat, endDate];
    }
  },

  mounted() {
    this.projectId = this.$route.query.projectId;
    this.date();
    let data = {
      projectId: this.projectId,
      monitorItemId: "17",
      resultType: "3",
      parentId: -1
    };
    this.projectModel
      .querylandSubsidenceProfile(data)
      .then(res => {
        this.queryPoint = res.data.list;
        if (this.queryPoint.length > 0) {
          this.currentGroupId = this.queryPoint[0].id;
          this.query();
        } else {
          this.currentGroupId = null;
        }
      })
      .catch(err => {
        console.log(err.message);
      });
  },
  watch: {
    surveyTime() {
      this.query();
    }
  }
};
</script>
<style>
.setting-tabs {
  height: 100%;
}

.setting-tabs > .el-tabs__content {
  height: calc(100% - 55px);
}
.setting-tabs > .el-tabs__content > .el-tab-pane {
  height: 100%;
}
</style>

<style scoped>
#surveyTime {
  text-align: center;
}
.content {
  padding-top: 10px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w {
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px;
}
.chart-plane {
  height: 100%;
}
.chartLine,
#chart_example {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
  /* border: 2px solid red;  */
  /* margin: 0 auto */
}
</style>

<style>
.el-tabs__nav {
  text-align: left;
  margin-left: 20px;
}
.el-tabs__active-bar {
  left: 0;
}
</style>
